<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="基础表单">
        表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。表单域标签也可支持响应式。
      </a-card>
    </div>
    <a-card :bordered="false" class="mt-3 proCard">
      <div class="sm:w-full md:w-full lg:w-full xl:w-1/3 m-auto">
        <a-form
          ref="formRef"
          :model="formValue"
          class="py-8"
          label-placement="left"
          @submit="handleSubmit"
        >
          <a-form-item label="预约姓名" field="name" :rules="rules.name">
            <a-input v-model="formValue.name" placeholder="输入姓名" />
          </a-form-item>
          <a-form-item label="预约号码" field="mobile" :rules="rules.mobile">
            <a-input v-model="formValue.mobile" placeholder="电话号码" />
          </a-form-item>
          <a-form-item label="预约时间" field="datetime" :rules="rules.datetime">
            <a-date-picker v-model="formValue.datetime" type="datetime" />
          </a-form-item>
          <a-form-item label="预约医生" field="doctor" :rules="rules.doctor">
            <a-select
              v-model="formValue.doctor"
              :options="doctorList"
              placeholder="请选择预约医生"
            />
          </a-form-item>
          <a-form-item label="预约事项" field="matter">
            <a-select
              v-model="formValue.matter"
              :options="matterList"
              multiple
              placeholder="请选择预约事项"
            />
          </a-form-item>
          <a-form-item label="性别" field="sex">
            <a-radio-group v-model="formValue.sex" field="sex">
              <a-space>
                <a-radio :value="1">男</a-radio>
                <a-radio :value="2">女</a-radio>
              </a-space>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="预约备注" field="remark" :rules="rules.remark">
            <a-input v-model="formValue.remark" placeholder="请输入预约备注" type="textarea" />
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button type="primary" html-type="submit">提交预约</a-button>
              <a-button @click="resetForm">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { Message } from '@arco-design/web-vue';

  const matterList = [
    {
      label: '种牙',
      value: 1,
    },
    {
      label: '补牙',
      value: 2,
    },
    {
      label: '根管',
      value: 3,
    },
  ];

  const doctorList = [
    {
      label: '李医生',
      value: 1,
    },
    {
      label: '黄医生',
      value: 2,
    },
    {
      label: '张医生',
      value: 3,
    },
  ];

  const rules = {
    name: [
      {
        required: true,
        message: '请输入预约姓名',
        trigger: 'blur',
      },
    ],
    remark: [
      {
        required: true,
        message: '请输入预约备注',
        trigger: 'blur',
      },
    ],
    mobile: [
      {
        required: true,
        message: '请输入预约电话号码',
        trigger: ['input'],
      },
    ],
    datetime: [
      {
        required: true,
        type: 'number',
        message: '请选择预约时间',
        trigger: ['blur', 'change'],
      },
    ],
    doctor: [
      {
        required: true,
        type: 'number',
        message: '请选择预约医生',
        trigger: 'change',
      },
    ],
  };

  const formRef: any = ref(null);

  const formValue = reactive({
    name: '',
    mobile: '',
    remark: '',
    sex: 1,
    matter: null,
    doctor: null,
    datetime: undefined,
  });

  function handleSubmit({ values, errors }) {
    if (errors) {
      console.log('error', errors);
      return Message.error('验证失败，请填写完整信息');
    }
    console.log('values', values);
    Message.success('验证成功');
  }

  function resetForm() {
    formRef.value.resetFields();
  }
</script>
